import { Title, TypingText } from "../../components"
import { Button, ConfigProvider, Form, Input } from "antd"
import styles from './index.module.less'
import { dark, light } from "../../theme"
import { ThemeContextType, useTheme } from "../../hooks/useTheme"
import { theme as antdTheme } from 'antd';
import { useEffect, useState } from "react"
function typeAndDelete(
    text: string | any[],
    deleteAfterChar: any,
    charsToDelete: any,
    replaceChars: any,
    newChars: string
) {
    const deletionIndex = text.indexOf(deleteAfterChar);
    if (deletionIndex !== -1) {
        const start = text.slice(0, deletionIndex);
        const end = text.slice(deletionIndex + charsToDelete, text.length);
        return start + newChars.repeat(replaceChars) + end;
    } else {
        return text;
    }
}
const Login = () => {
    const [form] = Form.useForm()
    const FormItem = Form.Item;
    const InputPassword = Input.Password;
    const { theme }: ThemeContextType = useTheme();

    return <ConfigProvider
        theme={{
            token: theme === 'light' ? light : dark,
            algorithm: [theme === 'light' ? antdTheme.defaultAlgorithm : antdTheme.darkAlgorithm,],
        }}
    >
        <div className={styles.loginBox}>
            <div className={styles.titleBox}>
                <Title title={<TypingText textToType={"轻笔，这是一款轻量的笔记应用，目前已支持Markdown、Excel、画板等功能，欢迎你的使用。"} />} level={2} />
            </div>
            <div className={styles.formPosition}>
                <div className={styles.formBox}>
                    <Title title={"登录"} level={4} />
                    <Form layout="vertical" style={{ width: 300 }} labelAlign='right' labelCol={{ span: 8 }} form={form}>
                        <FormItem style={{ marginBottom: 12 }} label='用户名'>
                            <Input />
                        </FormItem>
                        <FormItem label='密码'>
                            <InputPassword />
                        </FormItem>
                    </Form>
                    <Button type='primary'>登录/注册</Button>
                </div>
            </div>

        </div>
    </ConfigProvider>
}

export default Login